<style>
.module			{margin:5px 0px;border:0px dotted #444;}
</style>
<!--{************************************************************************************************************************************************************************}-->
<style>
.message		{border:1px solid #FFFFFF;padding:10px;margin-bottom: 15px;border-radius:5px; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3) inset;-moz-box-sizing: border-box;}
.message span	{font-weight: bold; color:#444;}
.success		{border-color:#71A100;background-color: #89BD00;}
.error			{border-color:#C63434;background-color: #FE5B54;}
.warning		{border-color:#CBAC00;background-color: #F6D43D;}
.infomation		{border-color:#308EEF;background-color: #3CAAE7;}
</style>
<div class="module">
	<div class="message success"><span>Success Notification</span></div>
	<div class="message error"><span>Error Notification</span></div>
	<div class="message warning"><span>Warning Notification</span></div>
	<div class="message infomation"><span>Informative Notification</span></div>
</div>
<!--{************************************************************************************************************************************************************************}-->
<style>
.module-head					{display:inline-block;border-radius:2px;background-color: #393939;width:100%;clear:both;;}
.module-head  h1				{float:left;color:#DDD;padding:10px;margin:0px;}
.module-head .searchbox			{float:right;margin-top:7px;margin-right: 10px;}
.module-head .searchbox input	{background-color: #DDD;border:1px solid #BBB;border-radius:3px;padding:2px;}
.module-head .searchbox label	{color:#EEE;}
.module-body			{padding:0px;clear:both;}
.list					{width:100%;border-collapse: collapse;clear:both;border-spacing: 0;border-color: #CCC;}
.list thead tr th		{border-top:1px solid #CCC;border-bottom:1px solid #CCC;}		
.list thead tr th,		
.list tbody tr th		{border-left:1px solid #CCC;}
.list thead tr th		{background-color:#E7E7E7;padding:5px 0px;border-right:1px solid #CCC;}
.list tbody tr th		{border-right:1px solid #CCC;}
.list tbody tr td		{padding:5px 10px;border-right:1px solid #CCC;}
.list tbody tr.odd		{background-color: #F6F6F6;}
.list tbody tr:hover	{background-color: #DDD;}
.list-footer			{background-color: #EEE;height:25px;clear: both;padding:7px;border:1px solid #CCC;}
.page-info				{float:left;padding:5px 0px;}
.paging					{float:right;border:1px solid #BBB;border-radius:2px;}
.paging	a				{padding:5px 7px;font-size: 11px;color:#222;font-weight: 400;cursor: pointer;background-color: #DDD;display: inline-block;margin: 0px;text-shadow: 0 3px 0 #EEE;}
.paging	a:hover			{background-color: #CCC;}
.paging	a.disabled		{cursor:default;opacity:0.35;}
</style>
<div class="module">
	<div class="module-head">
		<h1>Data Table with Toolbar</h1>
		<div class="searchbox">
			<label>
				Search : 
				<input type="text" />
			</label>
			<a class="button black">Search</a>
		</div>		
	</div>
	<div class="module-body">
		<table class="list">
			<colgroup>
				<col/>
				<col/>
				<col/>
				<col/>
				<col/>
				<col/>
			</colgroup>
			<thead>
				<tr>
					<th><input type="checkbox"/></th>
					<th>Rendering engine</th>
					<th>Browser</th>
					<th>Platform(s)</th>
					<th>Engine version</th>
					<th>CSS grade</th>
				</tr>
			</thead>
			<tbody>
				<tr class="odd">
					<th><input type="checkbox"/></th>
					<td>Trident</td>
					<td>Internet Explorer 4.0</td>
					<td>Win 95+</td>
					<td>5</td>
					<td>C</td>
				</tr>
				<tr class="even">
					<th><input type="checkbox"/></th>
					<td>Trident</td>
					<td>Internet Explorer 4.0</td>
					<td>Win 95+</td>
					<td>5</td>
					<td>C</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="list-footer">
		<div class="page-info">Showing 1 to 10 of 57 entries</div>
		<div class="paging"><a class="first disabled">First</a><a class="previous disabled">Previous</a><a>1</a><a>2</a><a>3</a><a class="next">Next</a><a class="last">Last</a></div>
	</div>
</div>
<!--{************************************************************************************************************************************************************************}-->
<style>
a.button :hover	{}
a.button	{border-radius:3px;border:1px solid #000;padding:3px 5px;font-weight: 400;cursor: pointer;text-decoration: none;display: inline-block;box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.3) inset;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);}
a.green		{border-color: #869A00;background-color: #A1B900;}
a.red		{border-color: #C90000;background-color: #DF3030;}
a.blue		{border-color: #166FBB;background-color: #2C99F5;}
a.orage		{border-color: #C79F16;background-color: #E3B822;}
a.purple	{border-color: #9E4C9D;background-color: #BC66BB;}
a.yellow	{border-color: #CCB708;background-color: #EFDB2F;}
a.black		{border-color: #444444;background-color: #555555;color:#FFF;}
a.grey		{border-color: #ABABAB;background-color: #DBDBDB;}
a.disable	{border-color: #869A00;background-color: #A1B900;}
</style>
<div class="module">
	<a class="button green">Green</a>
	<a class="button red">Red</a>
	<a class="button blue">Blue</a>
	<a class="button orage">Orange</a>
	<a class="button purple">Purple</a>
	<a class="button yellow">Yellow</a>
	<a class="button black">Black</a>
	<a class="button grey">Grey</a>
</div>
<!--{************************************************************************************************************************************************************************}-->
<style>
</style>
<div class="module">
	<textarea id="test" name="test" class="nicedit" style="width:100%;height:200px;"></textarea>
</div>
<script src="/js/nicedit/nicEdit.js"></script>

<script>
(function($){
	$.fn.nicedit = function() {
		return this.each(function(){
			$self = $(this);
			$self.css('width', $self.width()); 
			var param = {fullPanel : true,iconsPath : "/js/nicedit/nicEditorIcons.gif",maxHeight : $self.height()};
			var editor = new nicEditor(param).panelInstance($self.attr('name'));
			$self.data('niceditor', editor.nicInstances[editor.nicInstances.length-1]);
			$.fn.save = function()
			{
				$self.data('niceditor').saveContent();
				if($self.val() == '<br>')
				{
					$self.val($self.val().replace('<br>',''));
				}
			};
		});
		return this;
	};
	$('textarea.nicedit').nicedit();
})(jQuery);
</script>